<template>
  <div class="home">
    <Edit class="edit" :disableStatus="draggableConfig.disabled" @disable="disable" @add="add"></Edit>
    <!--使用draggable组件-->
    <draggable class="clearfix" style="margin:0 auto" v-model="chartConfig.options.newList" :disabled="draggableConfig.disabled"  chosenClass="chosen"   @start="" @end="">
        <transition-group>
            <div class="list" :style="{width:item.width,height:item.height}" v-for="(item,index) in chartConfig.options.newList" :key="item.id">
                <div class="list02">
                    <div class="listtitle">
                        <h4>{{item.title?item.title:"暂无标题"}}</h4>
                        <div class="ico" v-if="!draggableConfig.disabled">
                            <i @click="edit02_1(item.id)" class="el-icon-edit ico01"></i>
                            <i @click="del(item.id)" class="el-icon-delete ico01"></i>
                        </div>
                    </div>
                    <Chart  :options="item.chart" :id="'chart'+index"/>
                </div>
                
            </div> 
            
        </transition-group>            
    </draggable>
    <!-- 弹出层 -->
    <!-- 添加图 -->
    <Dialogtext @addChart="addChart" :dialogVisibleProps.sync="chartConfig.dialogVisible"/>  
    <!-- 修改图内容 -->
    <EditContent @edit="edit02_2"  :dialogVisibleProps.sync="chartConfig.editContent.show"/>
  </div>
</template>

<script>
import draggable from 'vuedraggable';
import Chart from '@/components/common/Chart.vue';
import chartData from '@/api/chartData.js';
import Edit from './Edit.vue';
import Dialogtext from './Dialogtext.vue';
import EditContent from './EditContent.vue';
export default {
    name:"home",
    components:{
        draggable,
        Chart,
        Edit,
        Dialogtext,
        EditContent
    },
    data(){
        return {
            //拖拽配置
            draggableConfig:{
                disabled:true
            },           
            // 数据配置
            chartConfig:{
                options:{chartData:chartData,newList:[]},
                dialogVisible:false,
                editContent:{
                    show:false,
                    id:1
                }
            }, 
        }
    },
    methods:{  
        //处理数据为draggable识别的格式{id：x，chart：{图表options}}
        toNewList(dataRes){
            var temp=[];
            dataRes.map((item,index)=>{
                temp[index]={id:index,width:"25vw",height:"35vh",chart:item};
            });  
            return temp;  
        },        
        toChartData(dataRes){
            var temp=[];
            dataRes.map((item,index)=>{
                temp[index]=item.chart;
            });
            return temp;
        },           
        // 开启拖拽/保存
        disable(e){
            this.draggableConfig.disabled=!this.draggableConfig.disabled;
            if(this.draggableConfig.disabled==false){
                this.$message({type: 'info',message: `请对图表进行编辑`,customClass:"messageW"});
            }else{
                // 保存：页面布局操作后的值应改传给后端进行更新
                console.log(this.toChartData(this.chartConfig.options.newList),"保存发送后端");
                this.$message({type: 'success',message: `保存成功`,customClass:"messageW"});
            };           
        },
        // 新增图标模块编辑Dialogtext
        add(){
            this.chartConfig.dialogVisible = true;
        },      
        addChart(){
            this.chartConfig.options.newList.push({
                id:this.chartConfig.options.newList.length+1,
                width:"25vw",
                height:"35vh",
                chart:{
                    xAxis: {},
                    yAxis: {},
                    series: [{
                        symbolSize: 20,
                        data: [
                            [10.0, 8.04],
                            [8.07, 6.95],
                            [13.0, 7.58],
                            [9.05, 8.81],
                            [11.0, 8.33],
                            [14.0, 7.66],
                            [13.4, 6.81],
                            [10.0, 6.33],
                            [14.0, 8.96],
                            [12.5, 6.82],
                            [9.15, 7.20],
                            [11.5, 7.20],
                            [3.03, 4.23],
                            [12.2, 7.83],
                            [2.02, 4.47],
                            [1.05, 3.33],
                            [4.05, 4.96],
                            [6.03, 7.24],
                            [12.0, 6.26],
                            [12.0, 8.84],
                            [7.08, 5.82],
                            [5.02, 5.68]
                        ],
                        type: 'scatter'
                    }]
                }
            })
        },
        // 删除
        del(e){
            console.log(e);
            this.chartConfig.options.newList.map((item,index)=>{
                if(item.id==e){
                    this.chartConfig.options.newList.splice(index,1)
                }
            });
        },
        // 当前图表模块内容编辑EditContent
        edit02_1(id){
            this.chartConfig.editContent.id=id;
            this.chartConfig.editContent.show=true;
        },
        edit02_2(e){
            this.chartConfig.options.newList.map(item=>{
                if(item.id==this.chartConfig.editContent.id){
                    item.title=e;
                }
            });
        },
        cellSizeAndPositionGetter(item, index) {
                // compute size and position
                return {
                    width: 100,
                    height: 150,
                    x: (index % 2) * 110,
                    y: parseInt(index / 2) * 160
                }
            }
    },    
    mounted(){
        this.chartConfig.options.newList=this.toNewList(this.chartConfig.options.chartData);
    }
}
</script>

<style scoped>
.list{
    display: inline-block;
    background-color: #fdfdfd;
    
} 
.list02{border: solid 1px #eee;
    border-radius: 2px 2px 2px 2px;
    -webkit-box-shadow: 1px 2px 5px #ccc;
    box-shadow: 1px 2px 5px #ccc;
    margin: 6px; height: 95%;}
.listtitle{position: relative; height: 40px; line-height: 40px; padding: 0px 10px; border-bottom: 1px solid #eee; cursor: default;}
.list .ico{position: absolute; right: 0; top: 15px;}
.list .ico .ico01{float: left; margin-right: 10px;}
.chosen .list02{border: 1px solid #2d8cf0;}
.edit{text-align: right; margin: 10px;}
</style>